<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">选择你的标签</block>
		</cu-custom>
		<scroll-view scroll-y>
			<view v-for="(item,index) in dataList" :key="index">
				<view class="flex justify-start align-start padding" style="flex-direction: column;width: 100%;">
					<view class="flex justify-start align-center padding-bottom-sm">
						<text class="cuIcon-emojifill text-orange"></text>
						<text class="text-bold text-orange">{{item.name}}</text>
						<text class="text-bold text-lg padding-left">({{chooseList[item.name].length?chooseList[item.name].length:0}}/5)</text>
					</view>
					<view class="flex justify-start align-center" style="flex-wrap: wrap;width: 100%;">
						<view v-for="(subItem,subIndex) in item.items" :key="subIndex">
							<view class="padding-right padding-bottom-sm" style="min-width: 120upx;">
								<view @tap="chooseItem(subItem,item.name)" style="width: 100%;" :class="'cu-tag text-df round padding '+[subItem.choosed==1?'bg-blue text-white':'bg-white text-black']">{{subItem.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white foot action flex justify-around align-center padding-top"
			style="width: 100%;">
			<button @tap="commitAction" :class="'cu-btn round '+themeColor" style="width: 65%;">确定选择</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/auth.js'
	import {
		getHobbyLabels,
		updateUserInfo
	} from '@/api/api.js'
	export default {
		data() {
			return {
				isDirect:false,
				themeColor:this.ThemeColor,
				chooseList:{},
				dataList:[]
			}
		},
		onLoad(options) {
			if(options.isDirect!==null&&options.isDirect!==undefined) {
				this.isDirect = true
			}
			let that = this
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('didChoose', function(data) {
			    that.chooseList = data
			})
			this.initChooseList()
		},
		methods: {
			commitAction() 
			{
				if(this.isDirect) {
					let userInfo = getUserInfo() 
					let params = {
						'userId':userInfo.user_id
					}
					//从每个分组里面选出第一个来进行组合，其余的再跟后
					let result = []
					Object.keys(this.chooseList).forEach(key=>{
						let categoryList = this.chooseList[key]
						if(categoryList.length > 0) {
							for(let index=0;index< 1;index++) {
								result.push(categoryList[index])
								continue
							}
						}
					})
					Object.keys(this.chooseList).forEach(key=>{
						let categoryList = this.chooseList[key]
						if(categoryList.length > 1) {
							for(let index=1;index< categoryList.length;index++) {
								result.push(categoryList[index])
							}
						}
					})
					if(result.length == 0) {
						uni.showToast({
							icon:'none',
							title:'至少选择一个标签'
						})
						return
					}
					params['hobbyLabels'] = result
					uni.showLoading({
						title:'正在提交...'
					})
					updateUserInfo(params).then(res=>{
						uni.hideLoading()
						uni.navigateBack({
							delta:1
						})
						uni.showToast({
							title:'更新成功',
						})
						uni.$emit('UserInfoNeedUpdate')
					}).catch(error=>{
						uni.hideLoading()
					})
					return
				}
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('finishChoose', this.chooseList);
				uni.navigateBack({
					delta: 1
				})
			},
			chooseItem(item,category)
			{
				if(item.choosed==0) {
					if(this.chooseList[category] == null || this.chooseList[category] == undefined) {
						this.chooseList[category] = []
					}
					if(this.chooseList[category].length >= 5) {
						uni.showToast({
							icon:'none',
							title:'单个类别最多选择五个标签!'
						})
						return
					}
					item.choosed = 1
					this.chooseList[category].push(item.name)
					return
				}
				let oldIndex = this.chooseList[category].indexOf(item.name)
				if(oldIndex !== -1) {
					this.chooseList[category].splice(oldIndex,1)
					item.choosed = 0
				}
			},
			initChooseList() {
				getHobbyLabels().then(res=>{
					res.data.forEach(item=>{
						let rItem = {
							name:item.name,
							items:[]
						}
						if(this.chooseList[item.name] && this.chooseList[item.name].length>0) {
							item.hobbies.forEach(subItem=>{
								if(this.chooseList[item.name].indexOf(subItem.title) !== -1) {
									rItem.items.push({
										'name':subItem.title,
										'choosed':1
									})
								}else{
									rItem.items.push({
										'name':subItem.title,
										'choosed':0
									})
								}
							})
						}else{
							this.chooseList[item.name] = []
							item.hobbies.forEach(subItem=>{
								rItem.items.push({
									'name':subItem.title,
									'choosed':0
								})
							})
						}
						this.dataList.push(rItem)
					})
				})
			}
		},
	}
</script>

<style scoped>

</style>
